<template>
  <div>

    <el-table :data="data" border style="width: 100%" ref="tableRef">
      <el-table-column prop="floorName" label="楼层" />
      <el-table-column prop="roomNumber" label="房间号码" />
      <el-table-column prop="cubicleNumber" label="隔间号码" />
      <el-table-column label="二维码">
        <template #default="{ row, $index }">
          <qrcode-vue
              :value="row.content"
              :size="100"
              :ref="el => registerQrRef(el, $index)"
          />
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { ElTable } from 'element-plus'
import QrcodeVue from 'qrcode.vue'

interface QrItem {
  title: string
  content: string
}

const props = defineProps<{
  data: QrItem[]
}>()

const tableRef = ref<InstanceType<typeof ElTable> | null>(null)
// 用来存二维码组件的 refs
const qrRefs = ref<(InstanceType<typeof QrcodeVue> | null)[]>([])

function registerQrRef(el, index: number) {
  qrRefs.value[index] = el
}

</script>
